<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
        integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>

    <!-- jquery -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"
        integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd"
        crossorigin="anonymous"></script>

</head>

<body>
    <h1>列表</h1>
     <!-- 更新 -->

     <div id="update">

        <div class="layui-input-inline">
            <input type="text" name="password" required lay-verify="required" placeholder="密码"
                autocomplete="off" class="layui-input" id="Password_one">
        </div>
        <br> <br>
        <div class="layui-input-inline">
            <input type="text" name="password" required lay-verify="required" placeholder="性别"
                autocomplete="off" class="layui-input" id="sex">
        </div>

        <br> <br>
        <div class="layui-input-inline">
            <input type="text" name="password" required lay-verify="required" placeholder="年龄"
                autocomplete="off" class="layui-input" id="age">
        </div>
        <br> <br>
        <select id="province">
            <option value="北京">北京</option>
            <option value="南京">南京</option>
            <option value="天京">天京</option>
        </select>
        <select id="city">
            <option value="东海">东海</option>
            <option value="西海">西海</option>
            <option value="北海">北海</option>
        </select>
        <select id="area">
            <option value="北冰洋">北冰洋</option>
            <option value="大西洋">大西洋</option>
            <option value="南冰洋">南冰洋</option>
        </select> <br><br>
        <div class="layui-input-inline"> <input type="text" name="password" required lay-verify="required"
                placeholder="详细地址" autocomplete="off" class="layui-input" id="detail_address">
        </div> <br><br>
        <button type="button" class="layui-btn" id="test1">
            <i class="layui-icon">&#xe67c;</i>上传图片
        </button>
        <br><br>
        <button class="layui-btn layui-btn-radius" id="Add_three">添加</button>
        <button class="layui-btn layui-btn-radius" id="Close_three">关闭</button>

    </div>

    <!-- 详情 -->

    <div id="detail_One">
        <h3>用户名: <span class="spa1"></span></h3> <br>
        <h3>性别: <span class="spa2"></span></h3> <br>
        <h3>年龄: <span class="spa3"></span></h3> <br>
        <h3>省: <span class="spa4"></span></h3> <br>
        <h3>市: <span class="spa5"></span></h3> <br>
        <h3>区: <span class="spa6"></span></h3> <br>
        <h3>详细地址: <span class="spa7"></span></h3> <br>

        <button class="layui-btn layui-btn-radius" id="Close_four">关闭</button>

    </div>
    <div class="box">
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <th>id</th>
                <th>姓名</th>
                <th>登录时间</th>
                <th>注册时间</th>
                <th>操作</th>
            </thead>
            <tbody id="tbo">

            </tbody>
        </table>
    </div>
</body>
<script>
    $(function () {
        fun()
    })
    var add = localStorage.getItem('res') ? JSON.parse(localStorage.getItem('res')) : []
    console.log(add);
    $('.spone').html(add.username)

    //渲染列表
    function fun() {
        $.ajax({
            type: 'GET',
            url: 'https://api.zzgoodqc.cn/api/user',
            dataType: 'json',
            headers: {
                'Content-Type': 'application/json',
                Authorization: `Bearer ${add.toubu}`
            },
            success: function (res) {
                console.log(res);
                if (res.code == 200) {
                    let add = ''
                    for (let i in res.data) {
                        add += `<tr>
                        <td>${res.data[i].id}</td>
                        <td>${res.data[i].username}</td>
                        <td>${res.data[i].created_at}</td>
                        <td>${res.data[i].updated_at}</td>
                        <td>
                            <a href="#" onclick="Delete(${res.data[i].id})">删除</a> | 
                            <a href="#" onclick="detail(${res.data[i].id})">详情</a> | 
                            <a href="#" onclick="update(${res.data[i].id})">更新</a>
                        </td>
                        </tr>`
                    }
                    $('#tbo').html(add)
                } else {
                    window.location.href = './loginDiv.html'
                }
            }
        })
    }
    // 更新
    function update(i) {
        $('#update').css('display', 'block')
        var arr = i
        $('#Add_three').click(function () {
            $.ajax({
                url: `https://api.zzgoodqc.cn/api/user/${arr}`,
                type: 'PUT',
                headers: {
                    Authorization: `Bearer ${add.Authorization}`
                },
                data: {
                    password: $('#Password_one').val(),
                    sex: $("#sex").val(),
                    age: $('#age').val(),
                    province: $('#province').val(),
                    city: $('#city').val(),
                    area: $('#area').val(),
                    detail_address: $('#detail_address').val(),
                },
                dataType: 'json',
                success: function (res) {
                    alert(res.message)
                    arr = null
                    image = null
                },
            })
        })
    }

    $('#Close_three').click(function () {
        $('#update').css('display', 'none')
    })

    //  详情
    function detail(i) {
        $('#detail_One').css('display', 'block')
        let arr = i
        $.ajax({
            type: 'get',
            url: `https://api.zzgoodqc.cn/api/user/${arr}`,
            headers: {
                'Content-Type': 'application/json',
                Authorization: `Bearer ${add.Authorization}`
            },
            dataType: 'json',
            success: function (res) {
                console.log(res.data.img);
                $('.spa1').html(res.data.username)
                $('.spa2').html(res.data.password)
                $('.spa3').html(res.data.sex)
                $('.spa4').html(res.data.age)
                $('.spa5').html(res.data.province)
                $('.spa6').html(res.data.city)
                $('.spa7').html(res.data.area)
                $('.spa8').html(res.data.detail_address) 

            }
        })
    }

    $('#Close_four').click(function () {
        $('#detail_One').css('display', 'none')
    })
</script>
<style>
    body{
        text-align: center;
    }
    h1{
        margin-top: 30px;
    }
    .box{
        width: 1000px;
        margin: auto;
        margin-top: 20px;
    }
    td,th{
        text-align: center;
    }
    #update {
        width: 400px;
        height: 400px;
        position: absolute;
        left: 50%;
        top: 400px;
        transform: translate(-50%, -50%);
        /* background: rgb(209, 47, 47, 0.5); */
        background-color: aqua;
        display: none;
    }
    #detail_One {
        width: 400px;
        height: 400px;
        position: absolute;
        left: 50%;
        top: 400px;
        transform: translate(-50%, -50%);
        /* background: rgba(250, 245, 245, 0.9); */
        background-color: aqua;
        display: none;
    }

</style>

</html>